<template>
    <div id="test">
        <v-charts :options="options"></v-charts>
    </div>
</template>

<script>
import "echarts/extension/bmap/bmap"
import styleJSON from '@/utils/json'
import scatterData from '@/mixin/scatterData'
//[{name:"城市名/地点名",value:[经度，维度,数据源]}]
var testPoint = [
    {
        name: "海门",
        value: [121.15, 31.89, 80]
    },
    {
        name: "南京",
        value: [118.78, 32.04, 100]
    },
    {
        name: "北京",
        value: [116.40, 39.91, 300]
    }
];
var testPoint2 = [
    {
        name: "天津",
        value: [117.217199, 39.012958]
    },
];


export default {
    mixins: [scatterData],
    data() {
        return {
            options: {}
        }
    },
    mounted() {
        // this.setOptions();
    },
    methods: {
        setOptions(scatterData) {
            var myChart = this.$echarts.init(document.getElementById("test"));
            this.options = {
                //关于百度地图的绘制
                bmap: {
                    key: "htUI6spQdH4peqLUnkhyAs4GhPeQ1wGE",
                    //绘制的中心点
                    center: [116.404, 39.915],
                    //缩放比例  在 3到19之间 现在是图例的正中央
                    zoom: 5,
                    //是否缩放
                    roam: true,
                    mapStyle: {
                        styleJSON: styleJSON.styleJSON,
                    },
                },
                series: [
                    {
                        name: '销售大盘',
                        type: "scatter",//散点图
                        coordinateSystem: "bmap",//坐标系必须为bmap
                        data: scatterData, //测试的城市数据
                        tooltip: {//鼠标移上去的提示
                            formatter: function (params, ticket, callback) {

                            }
                        },
                        //定制点的大小 根据销售额的数据定制点的大小
                        symbolSize: function (val) {
                            //val是 value: [118.78, 32.04, 300]
                            return val[2] / 15;
                        },
                        //展示的数据
                        label: {
                            formatter: (data) => {//展示名称和销售额
                                return data.name + "-" + data.data.value[2]
                            },
                            position: "right",
                            color: 'purple'
                        },
                        //点的颜色
                        itemStyle: {
                            color: "purple"
                        },
                        //鼠标移上去显示文本
                        emphasis: {
                            label: {
                                show: true
                            }
                        },
                        rippleEffect: {
                            brushType: 'stroke',//设置波纹样式
                            // color:"red"
                        },
                    },
                    {
                        name: 'top3',
                        type: "scatter",//散点图
                        coordinateSystem: "bmap",//坐标系必须为bmap
                        data: testPoint2, //测试的城市数据
                    },
                ]
            },
                myChart.setOption(this.options);
        }
    },
    watch: {
        scatterData: {
            handler(val) {
                console.log(val)
                this.setOptions(val);
            },
            deep: true
        }
    }
}
</script>







// export default {
    // mounted() {
    //     //创建bmp的实例
    //     var map = new BMap.Map("test");
    //     console.log(map)
    //     // 创建地图实例  
    //     var point = new BMap.Point(116.404, 39.915);
    //     // 创建点坐标  
    //     map.centerAndZoom(point, 15);
    //     var marker = new BMap.Marker(point);        // 创建标注    
    //     map.addOverlay(marker);


    //     //开启鼠标滚轮缩放
    //     map.enableScrollWheelZoom(true);

    //     map.addControl(new BMap.NavigationControl());
    //     map.addControl(new BMap.NavigationControl());
    //     map.addControl(new BMap.ScaleControl());
    //     map.addControl(new BMap.OverviewMapControl());
    //     map.addControl(new BMap.MapTypeControl());
    //     /* 添加折线 */
    //     var polyline = new BMap.Polyline([
    //         new BMap.Point(116.399, 39.910),
    //         new BMap.Point(116.405, 39.920)
    //     ],
    //         { strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5 }
    //     );
    //     map.addOverlay(polyline);
    // }
// }


<style lang="scss" scoped>
#test {
    width: 600px;
    height: 400px;
}
</style>